import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import request from "../../request";
import { useEffect } from "react";
import { ArticleBySlugResult, onUnload } from "../../store/module/articleSlice";
import ArticleAction from "./ArticleAction";
function Article() {
  const { slug: routesSlug } = useParams();

  const dispatch = useDispatch();

  const getArticleBySlug = async (routeSlug) => {
    let result = await request.article.get(routeSlug);
    console.log(result);
    if (result.status == 1) {
      dispatch(ArticleBySlugResult(result.data));
    } else {
      dispatch(ArticleBySlugResult({ errors: result.message }));
    }
  };

  useEffect(() => {
    getArticleBySlug(routesSlug);
    return () => {
      // 收尾工作
      dispatch(onUnload());
    };
  }, []);
  const article = useSelector((state) => {
    return state.article;
  });
  const currentUser = useSelector((state) => {
    return state.login.currentUser;
  });

  return (
    <div>
      文章详情
      <ArticleAction article={article} currentUser={currentUser} />
    </div>
  );
}

export default Article;
